<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/bootstrap/bootstrap.css">
	<link rel="stylesheet" href="css/public/zqphone.css" />

	<!-- <script src="js/bootstrap/bootstrap.bundle.min.js"></script> -->
	<title>指琴创作工作站（不再更新版）  2月 -   不再更新，只用于学习交流</title>

</head>

<body>
	<div id="bodybox" class="container justify-content-between">
		<nav class="navbar navbar-expand-lg nav_white" id="nav">
			<a class="navbar-brand rui-tf" href="#">指琴创作工作站 0.56  （不再更新版）<br>  2月 -   不再更新，只用于学习交流</a>
			<ul class="nav rui-tf">
				<li class="nav-item">
					<a class="nav-link light" href="#">关灯（一次性的）</a>
				</li>
				<!--
					<li class="nav-item">
						<a class="nav-link" href="#">琴社</a>
					</li> -->
				<li class="nav-item d-lg-block d-sm-none d-none" style="margin-left: 9px auto;">
					<div id="headbox" class="">
						<img id="headImg" width="30px" src="" alt="">
						<span id="username"></span>
					</div>
				</li>
				<li class="nav-item d-lg-none d-sm-block">
					<div id="headbox">
						<img id="headImg" width="30px" src="" alt="">
					</div>
				</li>
			</ul>
		</nav>
		<!-- 这里是测试窗口 -->
		<div id="vsioncard">
			<div class="alert alert-success VersionSta" role="alert" data-toggle="collapse" data-target="#collapseOne"
				aria-expanded="true" aria-controls="collapseOne">
				版本预览
			</div>
			<div class="accordion versionData" id="accordionExample">
				<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
					<div class="card-body">
						0.5-0.56版本更新总览
						<ul>
							<li>顺序按键选择强制依次选择</li>
							<li>增加插图功能，插图可自定义（实验性）</li>
							<li>增加选择按键名字，数字跟字母键名</li>
							<li>兼容部分移动设备</li>
						</ul>

						<!-- 0.6-版本功能预览 -->
						原本计划更新版 -- 不再更新
						<ul>
							<li>增加歌词添加功能</li>
							<li>增加工作项目保存功能（保存为txt文件到本地，可重新导入编辑）</li>
							<li>修复插图功能的高度bug</li>
							<li>优化ui界面</li>
							<li>颜色顺序可调整</li>
							<li>预览铺子弹出来什么样子</li>
						</ul>

					</div>
				</div>
			</div>
		</div>

		<div id="leftBox" class="leftBox">

			<div id="lefthead">
				<div class="leftbasicElem">
					琴谱名字：
					<input id="MusicName" type="text" placeholder="输入一个琴谱的名字">
					<p>字体大小
						<input type="range" id="MusicNameFontSize">
						<input type="color" id="MusicNameColor">
					</p>
					<p></p>
					<div>
						<span class="badge badge-danger">R</span>
						封面插图：
						启用
						<input id="IstopImage" type="checkbox" oninput="drawTopImage()">
						<input type="file" id="FilleSelect">
					</div>
					<p></p>
				</div>
			</div>

			<div id="leftbody">
				<div id="topKey" class="key-def">
					按键选择 :
					<div id="weightKey">
						<input style=" background-color: #000000;" type="button" class="weight" id="weight0" value="0">
						<input type="button" class="weight xiaoshi" id="weight1" value="1">
						<input type="button" class="weight xiaoshi" id="weight2" value="2">
					</div>
					手绘输入音模式
					<!-- 两种按键名，第一个是abc，第二个是音名 -->
					<button onclick="clearKey()" style="border: none;" class="badge badge-info">清除选择的手绘音</button>
					<div id="TobKeyBox">

					</div>
					<span id="keySelectText1"></span>
					<span id="keySelectText2"></span>

					<div style="font-size: 12px;">
						按键音名选择：
						字母：<input type="radio" onclick="keyNameSelect(0)" name="keyName">
						数字：<input type="radio" onclick="keyNameSelect(1)" name="keyName" checked>
						</p>
						<!-- <div>
							<div style="display: inline-block;">
								<textarea id="lyric" cols="30" rows="10"></textarea>
							</div>
							<div style="display: inline-block; position: relative; top: -35px;">
								<button class="btn btn-warning">编辑下一段</button>
								<br>
								<button class="btn btn-info">编辑下一段</button>
							</div>
						</div> -->


						<!-- <br> -->
						<!-- 标注歌词，正在编辑第<span></span>行/段 -->
					</div>
					<p>生成</p>
					<div class="btn-group" role="group" aria-label="Basic example">
						<button onclick="DrawAction(0)" id="actionThe" type="button"
							class="btn btn-warning">重新生成</button>
						<button onclick="DrawAction(1)" type="button" id="nextKey" class="btn btn-info">生成下个</button>
						<button onclick="DeletThis()" type="button" class="btn btn-danger">删除这个 </button>
						
					</div>
					<div class="btn-group" role="group" aria-label="Basic example">
						<button onclick="ClearOrRestDrawCanvas(0)" type="button" class="btn btn-danger">清空/带记录</button>
						</div>
					<p>
					</p>
					<button style="width: 50%; font-size:10px;" id="download" type="button" class="btn success">下载(可能有浏览器限制而下载失败)</button>
				</div>
			</div>
			<!-- leftbody -->
			<div id="leftslot">
			</div>
			<hr>
			<p> 调试面板</p>
			<p>
				<span class="badge badge-danger">R</span>
				<span> 画板背景色： </span>
				<input id="canvasbackgroundInput" type="color">
			</p>

			<p>
				<span class="badge badge-danger">R</span>
				<span>单排数量(bug)</span>
				<select id="keyRowNum">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
				</select>
			</p>
			<p>
				<span class="badge badge-danger">R</span>
				<span>填充框内边距</span>
				<input id="fillpadding" type="range">
			</p>
			<p>
				<span class="badge badge-primary">R</span>
				<span>颜色顺序(暂时无法使用)</span>
			<div>
				<input type="color">
				<span>></span>
				<input type="color">
				<span>></span>
				<input type="color">
			</div>
			</p>
			<hr>
			<div id="R">
				<span class="badge badge-danger">R</span> 支持热调试
				<span class="badge badge-primary">R</span> 不支持热调试
				<span class="badge badge-info">R</span> 即将支持热调试
			</div>
		</div>

		<div id="rightBox" class="rightBox">
			<!-- <button>听一下这个铺子弹出来是怎么样</button> -->

			<!-- <img id="cavimage" src="" alt=""> -->
			<canvas id="drawcanvas">
			</canvas>
		</div>
		<div id="handle">拉</div>
		<!-- <div id="rightBoxCopy" class="rightBoxCopy">
				<div id="handle"></div>
			</div> -->
		<!-- 		<div id="bottonBox" class="fontsize12">

				<hr>
				单个数值调试（测试）
				<br>
				数量 <input type="number" id="quantityInput">
				<br>
				boxBeginX <input type="number" id="boxBeginXInput">
				<br>
				boxEndY <input type="number" id="boxEndYInput">
				<br>
				keyboxWidthAndHeight <input type="number" id="keyboxWidthAndHeightInput">
				<br>
				innerPadding <input type="number" id="innerPaddingInput">
				<br>
				rightMargin <input type="number" id="rightMarginInput">

				<button onclick="DefDome()">BeginKeyDome</button>
				<button onclick="BeginKeyTest()">Test</button>

			</div> -->
	</div>




</body>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap/bootstrap.js"></script>
<script src="js/public/publicFun.js"></script>
<script src="js/public/phoneFun.js"></script>
<script src="js/zq.js"></script>
<script src="js/otherfunction.js"></script>

</html>